<template>
  <div class="content">
    <div class="scroll-view-box" v-loading="submitBtn">
      <el-form label-width="120px" label-position="top" :inline="true" :model="formData" :rules="addRules"
        ref="addRules">
        <el-form-item label="产品大类" prop="product_type_id">
          <el-select filterable @change="product_type_idFunc" v-model="formData.product_type_id" placeholder="选择产品大类" clearable
            class="input-width">
            <el-option v-for="item in productTypeList" :key="item.Id" :label="item.product_type_name" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称" prop="product_id" v-if="formData.product_type_id">
          <el-select filterable v-model="formData.product_id" placeholder="选择产品名称" clearable class="input-width">
            <el-option v-for="item in productNameList" :key="item.Id" :label="item.product_name" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品规格" prop="product_specs_name">
          <el-input v-model="formData.product_specs_name" placeholder="输入产品规格" clearable class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="产品单位" prop="unit_id">
          <el-select filterable v-model="formData.unit_id" placeholder="选择产品单位" clearable class="input-width">
            <el-option v-for="item in productUnitList" :key="item.Id" :label="item.product_unit_name" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品状态" prop="state">
          <div class="input-width">
            <el-radio-group v-model="formData.state">
              <el-radio :label="1">上架</el-radio>
              <el-radio :label="2">下架</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="产品参数" prop="product_describe">
          <el-input v-model="formData.product_describe" placeholder="输入产品参数" clearable class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="产品型号" prop="model">
          <el-input v-model="formData.model" placeholder="输入产品型号" clearable class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="样品照片" prop="img_list">
          <div class="file-list-box">
            <el-upload accept="image/*" multiple class="avatar-uploader" action="#" :show-file-list="false"
              :auto-upload="false" list-type="picture-card" :on-change="change_file">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="file-item-box" v-for="(item, index) in formData.img_list" :key="index">
              <div class="el-icon-delete-box" @click="delImgFUnc(index)">
                <i class="el-icon-error"></i>
              </div>
              <el-tooltip class="item" effect="dark" :content="item.name || item.file_name" placement="top">
                <img class="img" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)" />
              </el-tooltip>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveSubmit('addRules')" :loading="submitBtn">提交</el-button>
        <el-button @click="cancelFunc">关闭</el-button>
      </span>
    </div>
  </div>
</template>
<script>
import purchaseApi from "@/api/purchaseApi";
var phoneRule = (rule, value, callback) => {
  if (!/^1\d{10}$/.test(value)) {
    return callback(new Error("请输入正确手机号"));
  } else {
    callback();
  }
};
var password = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("密码不能为空"));
  } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/.test(value)) {
    callback(new Error("密码须8-16位,包含大小写字母、数字"));
  } else {
    callback();
  }
};
export default {
  name: 'addProductType',
  data() {
    var img_list = (rule, value, callback) => {
      if (!value.length) {
        callback(new Error('请选择上传样品照片'));
      } else {
        callback();
      }
    };
    return {
      formData: {
        product_type_id: "",
        product_id: "",
        product_specs_name: "",
        state: 1,
        unit_id: "",
        product_describe: "",
        img_list: [],
        model: ""
      },
      addRules: {
        product_type_id: [
          {
            required: true,
            message: "请选择产品大类",
            trigger: "change",
          },
        ],
        product_id: [
          {
            required: true,
            message: "请选择产品名称",
            trigger: "change",
          },
        ],
        product_specs_name: [
          {
            required: true,
            message: "请输入产品规格",
            trigger: "change",
          },
        ],
        unit_id: [
          {
            required: true,
            message: "请选择产品单位",
            trigger: "change",
          },
        ],
        product_describe: [
          {
            required: true,
            message: "请输入产品参数",
            trigger: "change",
          },
        ],
        model: [
          {
            required: true,
            message: "请输入产品型号",
            trigger: "change",
          },
        ],
        img_list: [
          {
            required: true,
            validator: img_list,
            trigger: "change",
          },
        ],
      },
      submitBtn: false,
      productUnitList: [],
      productTypeList: [],
      productNameList: []
    };
  },
  computed: {
    hisList() {
      return this.$store.getters.routerHis;
    },
    path() {
      return this.$route.path;
    },
  },
  mounted() {
    this.getProductUnit();
    this.getProductType();
    this.getProductSpecsInfo();
  },
  methods: {
    // 产品大类选择  筛选出关联的产品
    product_type_idFunc(e) {
      if (!e) {
        this.productNameList = [];
        this.formData.product_id = '';
        return;
      }
      this.getProductName(e);
    },
    // 图片
    delImgFUnc(index) {
      let formData = this.formData;
      if (formData.img_list[index].Id) {
        formData.delete_files.push(formData.img_list[index].Id);
      }
      formData.img_list.splice(index, 1);
      this.formData = formData;
    },
    change_file(file, list) {
      console.log(file)
      let formData = this.formData;
      this.$videoPost(file, (e => {
        formData.img_list.push(e);
        this.formData = formData;
      }));
    },
    // 提交
    saveSubmit(formName) {
      let formData = this.formData;
      console.log(formData)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let formDataObj = new FormData();
          formDataObj.append('data', JSON.stringify({
            product_type_id: formData.product_type_id,
            product_id: formData.product_id,
            product_specs_name: formData.product_specs_name,
            state: formData.state,
            unit_id: formData.unit_id,
            product_describe: formData.product_describe,
            delete_files: formData.delete_files || '',
            specs_id: formData.specs_id,
            model: formData.model
          }))
          formData.img_list.forEach((item) => {
            if (item.raw) {
              formDataObj.append("file_list[]", item.raw);
            }
          });
          if (formData.specs_id) {
            this.updateProductSpecs(formDataObj);
            return;
          }
          this.addProductSpecs(formDataObj);
        } else {
          return false;
        }
      });
    },
    // 提交请求
    addProductSpecs(obj) {
      this.submitBtn = true;
      purchaseApi.addProductSpecs(obj).then(res => {
        console.log(res, '添加产品规格')
        this.submitBtn = false;
        if (res.code == 200) {
          setTimeout(() => {
            this.cancelFunc();
          }, 200);
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // 更新请求
    updateProductSpecs(obj) {
      this.submitBtn = true;
      purchaseApi.updateProductSpecs(obj).then(res => {
        console.log(res, "更新规格")
        this.submitBtn = false;
        if (res.code == 200) {
          setTimeout(() => {
            this.cancelFunc();
          }, 200);
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // 取消
    cancelFunc() {
      this.$goBackTab(this);
    },
    // ----------------------------产品单位列表--------------------------------------
    getProductUnit() {
      purchaseApi.getProductUnit({
        unit_name: "",
        page: 1,
        num: 9999
      }).then(res => {
        console.log(res, "单位列表")
        if (res.code == 200) {
          this.productUnitList = res.data.list;
        }
      })
    },
    // ----------------------------产品大类列表--------------------------------------
    getProductType() {
      purchaseApi.getProductType({
        page: 1,
        num: 9999,
        type_name: "",
        start_time: "",
        end_time: "",
        user_id: "",
        state: "",
        insurance_status: "",
      }).then(res => {
        console.log(res, "产品大类列表")
        if (res.code == 200) {
          this.productTypeList = res.data.list;
        }
      })
    },
    // ----------------------------产品名称--------------------------------------
    getProductName(product_type_id) {
      purchaseApi.getProductName({
        page: 1,
        num: 9999,
        product_name: "",
        product_type_id,
        start_time: "",
        end_time: "",
        user_id: "",
        state: "",
      }).then(res => {
        console.log(res, "产品名称")
        if (res.code == 200) {
          this.productNameList = res.data.list;
        }
      })
    },
    // ----------------------------规格详情--------------------------------------
    getProductSpecsInfo() {
      if (!this.$route.query.id) return;
      purchaseApi.getProductSpecsInfo({
        specs_id: this.$route.query.id
      }).then(res => {
        console.log(res, "产品规格详情")
        if (res.code == 200) {
          this.formData = {
            product_type_id: res.data.product_type_id,
            product_id: res.data.product_id,
            product_specs_name: res.data.product_specs_name,
            state: res.data.state,
            unit_id: res.data.unit_id,
            product_describe: res.data.product_describe,
            img_list: res.data.file_list,
            delete_files: [],
            specs_id: res.data.Id,
            model: res.data.model
          }
          this.getProductName(res.data.product_type_id);
        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
@import "@/styles/addPage.scss";
</style>